<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志军规：从混乱到秩序的十条铁律</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 1.5rem;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.9rem;
            line-height: 1.6;
            position: relative;
        }
        .code-block::before {
            content: attr(data-lang);
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            font-size: 0.75rem;
            color: #888;
            text-transform: uppercase;
        }
        .section-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            font-weight: 700;
            margin-right: 1rem;
        }
        .highlight-box {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-left: 4px solid #667eea;
            padding: 1.5rem;
            border-radius: 8px;
            margin: 2rem 0;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out;
        }
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #667eea;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto animate-fadeInUp">
            <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                日志军规：<br>从混乱到秩序的十条铁律
            </h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90 leading-relaxed">
                你以为打日志是小事？也许正是这种轻视，让你在凌晨三点被生产事故电话吵醒。
            </p>
            <div class="flex items-center space-x-6 text-lg">
                <div class="flex items-center">
                    <i class="fas fa-clock mr-2"></i>
                    <span>15分钟阅读</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-layer-group mr-2"></i>
                    <span>工程实践</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-fire mr-2"></i>
                    <span>必读精选</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction -->
    <section class="py-16 px-6">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12 card-hover">
                <p class="text-lg leading-relaxed mb-6">
                    <span class="drop-cap">一</span>个优秀的工程师和普通码农的区别，往往体现在那些看似微不足道的细节上。日志就是这样一个细节。
                </p>
                <p class="text-lg leading-relaxed mb-6">
                    我曾经目睹一个团队花了整整一周时间排查一个本可以在10分钟内解决的问题，只因为他们的日志像一团乱麻。更荒谬的是，很多人自认为写的日志"足够好"，却不知道他们的日志实际上像是没调音的二胡，不仅没有帮助，反而制造了混乱。
                </p>
                <p class="text-lg leading-relaxed">
                    在经历了无数次"日志救火"和"日志灾难"后，我总结出了这10条日志军规，它们来自血与泪的教训，也来自顶级互联网公司的最佳实践。遵循这些规则，你将彻底改变打日志的方式，并可能在下一次生产事故中成为团队的英雄。
                </p>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <section class="py-16 px-6">
        <div class="max-w-6xl mx-auto">
            <!-- Section 1 -->
            <div class="mb-16">
                <h2 class="text-3xl font-bold mb-8 flex items-center">
                    <span class="section-number">1</span>
                    日志的根本目的与常见误区
                </h2>
                
                <div class="grid md:grid-cols-2 gap-8 mb-12">
                    <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                        <h3 class="text-xl font-bold mb-4 text-purple-700">
                            <i class="fas fa-book-reader mr-2"></i>日志是为了"读"
                        </h3>
                        <p class="text-gray-700 mb-4">
                            很多开发者的第一反应就是"日志当然是为了排查问题"，但问题是：<strong>谁来读这些日志？</strong>
                        </p>
                        <p class="text-gray-700">
                            大多数日志的命运是：要么无人问津，要么在深夜被迫阅读。在你敲下每一行日志代码时，请想象凌晨三点被吵醒的自己需要从海量日志中找出线索。
                        </p>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
                        <h3 class="text-xl font-bold mb-4 text-purple-700">
                            <i class="fas fa-exclamation-triangle mr-2"></i>多打日志是一个危险的建议
                        </h3>
                        <p class="text-gray-700 mb-4">
                            "多打点日志吧"是技术leader最常给的建议之一。但这句话就像"多喝点水"一样空泛。
                        </p>
                        <p class="text-gray-700">
                            没有目的的狂打日志，只会让真正有价值的信息淹没在日志的海洋中。记住，<strong>每一行日志都有成本</strong>：存储成本、I/O成本、阅读成本。
                        </p>
                    </div>
                </div>

                <div class="bg-gray-900 rounded-xl p-8 mb-8">
                    <h4 class="text-white text-lg font-bold mb-4">
                        <i class="fas fa-code mr-2"></i>代码示例：从糟糕到优秀
                    </h4>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <p class="text-red-400 mb-2 font-semibold">❌ 糟糕的日志</p>
                            <div class="code-block" data-lang="java">
log.info("处理开始");
// 大量业务逻辑...
log.info("处理结束");
                            </div>
                        </div>
                        <div>
                            <p class="text-green-400 mb-2 font-semibold">✅ 改进后的日志</p>
                            <div class="code-block" data-lang="java">
log.info("开始处理用户支付请求 userId={}, orderId={}, amount={}", 
    userId, orderId, amount);
// 业务逻辑...
log.info("用户支付请求处理完成 userId={}, orderId={}, result={}", 
    userId, orderId, result);
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Section 2 -->
            <div class="mb-16">
                <h2 class="text-3xl font-bold mb-8 flex items-center">
                    <span class="section-number">2</span>
                    日志的等级艺术
                </h2>

                <div class="highlight-box mb-8">
                    <h3 class="text-xl font-bold mb-4">
                        <i class="fas fa-layer-group mr-2"></i>日志级别速查表
                    </h3>
                    <div class="grid md:grid-cols-5 gap-4">
                        <div class="text-center">
                            <div class="bg-red-500 text-white rounded-lg py-2 px-4 mb-2 font-bold">ERROR</div>
                            <p class="text-sm">系统无法正常运行</p>
                        </div>
                        <div class="text-center">
                            <div class="bg-yellow-500 text-white rounded-lg py-2 px-4 mb-2 font-bold">WARN</div>
                            <p class="text-sm">潜在的问题</p>
                        </div>
                        <div class="text-center">
                            <div class="bg-blue-500 text-white rounded-lg py-2 px-4 mb-2 font-bold">INFO</div>
                            <p class="text-sm">重要业务事件</p>
                        </div>
                        <div class="text-center">
                            <div class="bg-gray-500 text-white rounded-lg py-2 px-4 mb-2 font-bold">DEBUG</div>
                            <p class="text-sm">开发调试信息</p>
                        </div>
                        <div class="text-center">
                            <div class="bg-gray-400 text-white rounded-lg py-2 px-4 mb-2 font-bold">TRACE</div>
                            <p class="text-sm">最详尽的信息</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
                    <h3 class="text-xl font-bold mb-4 text-red-600">
                        <i class="fas fa-times-circle mr-2"></i>为什么90%的ERROR级别日志都用错了
                    </h3>
                    <p class="text-gray-700 mb-4">
                        大多数开发者会在catch块里机械地写ERROR日志，但很多异常是预期内的业务异常，不是系统错误。
                    </p>
                    <div class="code-block" data-lang="java">
try {
    authService.login(username, password);
} catch (InvalidCredentialsException e) {
    // 这是预期内的业务场景，用INFO记录
    log.info("用户{}登录失败：密码错误", username);
    return "密码错误";
} catch (Exception e) {
    // 这是意外异常，用ERROR记录
    log.error("用户{}登录过程发生系统异常", username, e);
    return "系统异常";
}
                    </div>
                </div>
            </div>

            <!-- Visualization -->
            <div class="mb-16">
                <h2 class="text-3xl font-bold mb-8 text-center">日志系统架构全景图</h2>
                <div class="bg-white rounded-xl shadow-lg p-8">
                    <div class="mermaid">
graph TB
    A[应用程序] -->|产生日志| B[日志框架]
    B --> C{日志级别过滤}
    C -->|ERROR/WARN| D[异步队列]
    C -->|INFO| D
    C -->|DEBUG/TRACE| E[开发环境输出]
    D --> F[日志收集器]
    F --> G[Elasticsearch]
    G --> H[Kibana可视化]
    G --> I[告警系统]
    I --> J[运维人员]
    
    style A fill:#667eea,stroke:#333,stroke-width:2px,color:#fff
    style G fill:#764ba2,stroke:#333,stroke-width:2px,color:#fff
    style